<template> <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2> 
        <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
             <el-step title="填写课程基本信息"/>
             <el-step title="创建课程大纲"/>
                <el-step title="最终发布"/>
        </el-steps>
           <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
      </el-form-item>

    <!-- 所属分类 TODO -->
     <el-form-item label="课程分类"> <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="一级分类" @change="subjectLevelOneChanged">  <el-option
              v-for="subject in subjectOneList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"/>
          </el-select>
                  <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
           <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
      </el-form-item>
  

   <!-- 课程讲师 TODO -->
    <!-- 课程讲师 -->
          <el-form-item label="课程讲师"> <el-select
              v-model="courseInfo.teacherId"
              placeholder="请选择">  <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"/>
          </el-select>
          </el-form-item>


        <el-form-item label="总课时">
                <el-input-number
                  :min="0"
                  v-model="courseInfo.lessonNum"
                  controls-position="right"
                  placeholder="请填写课程的总课时数"
                />
              </el-form-item>

                <!-- 课程简介 TODO -->

                <!-- 课程简介-->
            <el-form-item label="课程简介"> 
              <tinymce :height="300" v-model="courseInfo.description"/>
            </el-form-item>
                <!-- 课程封面 TODO -->
                <!-- 课程封面-->
        <el-form-item label="课程封面"> 
        <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :action="BASE_API+'/eduoss/fileupload/upload'"
              class="avatar-uploader">
              <img :src="courseInfo.cover">
        </el-upload>

        </el-form-item>
  

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />元
      </el-form-item>

            <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
            </el-form-item>
            </el-form>
    </div>
</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'    //引入组件
  export default {

    components: { Tinymce },   //声明组件
    
    data(){
        return{
                saveBtnDisabled:false,
                courseInfo:{
                    title: '', 
                    subjectId: '',      //二级分类id
                    subjectParentId:'',   //一级分类id
                    teacherId: '', 
                    lessonNum: 0, 
                     description: '',
                    cover: '/static/122.jpg',
                    price: 0
                },
                courseId:'',
                BASE_API: process.env.BASE_API  , // 接口API地址
                teacherList:[]   ,//封装所有的讲师
                subjectOneList:[],   //一级分类
                subjectTwoList:[]   //二级分类
                

        }
    },
    created(){
   

      //获取路由id值
      if(this.$route.params && this.$route.params.id){
        this.courseId=this.$route.params.id
        this.getInfo()
      }
          //初始化所有讲师
          this.getListTeacher()
          //初始化一级分类
          this.getOneSubject()
         
    },
     watch: {   //监听
            $route(to, from) {     //路由变化，监听执行
    
            this.init()
                }
            },
    methods:{
      //判断是添加还是修改
         init(){

    if (this.$route.params && this.$route.params.id) {
            //从路径获取id值
            this.courseId= this.$route.params.id
            //调用根据id查询方法
            this.getInfo(this.courseId)  }
            else{
                //路径没id，做添加
                //清空表单
                this.courseInfo={}
            }
        },




         //跟课程id查询信息
      getInfo(){
         course.getCourseInfoId(this.courseId)
         .then(response=>{
          //有课程基本信息,包含一级分类id和二级id
            this.courseInfo= response.data.courseInfoVo
            //查询所有分类，包含一级二级
            subject.getSubjectList()
            .then(response=>{
              //获取所有一级分类
              this.subjectOneList= response.data.list

              //把所有一级分类数据遍历，比较当前courseInfo里面的一级id和所有的一级分类id
              for(var i=0;i<this.subjectOneList.length;i++){
                //获取每个一级分类
                var OneSubject=this.subjectOneList[i]
                //比较当前courseinfo里面的一级分类id和所有一级分类id
                if(this.courseInfo.subjectParentId==OneSubject.id){
                  //获取一级分类所有二级分类
                  this.subjectTwoList=OneSubject.children

                }

              }
            })
            //初始化讲师
            this.getListTeacher()
         })
      },
        //上传封面成功调用的方法
        handleAvatarSuccess(res,file){
            this.courseInfo.cover=res.data.url
        },
        //上传之前调用的方法
        beforeAvatarUpload(file){
          const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M

        },
     

        //点击某个一级分类，触发change，显示对应二级分类
        subjectLevelOneChanged(value){
            //value是一级分类id值
            // alert(value)
            for (let i = 0; i < this.subjectOneList.length; i++) {
              //每个一级分类
              var OneSubject=this.subjectOneList[i]
              //判断：所有一级分类id和点击一级分类id是否一致
              if(value===OneSubject.id){
                //从一级分类获取里面所有二级分类
                this.subjectTwoList=OneSubject.children
                //把二级分类的id值设为空
                this.courseInfo.subjectId = ''
              }

              
            }
        },

        //查询所有一级分类
        getOneSubject(){
          subject.getSubjectList()
          .then(response=>{
           this.subjectOneList= response.data.list
          })
        },

        //查询所有的讲师
        getListTeacher(){
          course. getListTeacher()
          .then(response=>{
           this.teacherList= response.data.item
          })
        },

         //添加课程
         addCourse(){
             course.addCourseInfo(this.courseInfo)
                .then(reponse=>{
                    //提示
                      this.$message({
                        type: 'success',
                         message: '添加课程信息成功!'
                         });
                //跳转到第二步
                this.$router.push({path:'/course/chapter/'+reponse.data.courseId})
                   })
        },
         

         //修改课程
         updateCourse(){
                  course.updateCourseInfo(this.courseInfo)
                  .then(reponse=>{
                                //提示
                      this.$message({
                        type: 'success',
                         message: '修改课程信息成功!'
                         });
                //跳转到第二步
                this.$router.push({path:'/course/chapter/'+this.courseId})
               })
                  

         },


        saveOrUpdate(){
            //判断添加还是修改
            if(!this.courseInfo.id){
                //添加
                this.addCourse()
            }else{
              //修改
              this.updateCourse()
            }
    
        }
          
    }

}
</script>
<style scoped>
        .tinymce-container {
        line-height: 29px; }
</style>